<!DOCTYPE HTML> 
<html>
 <head>
  <meta charset="UTF-8"/>
  <title>RIGHT: R Interactive Graphics via HTml</title>
  <link rel="stylesheet" href="css/right.css"/>
 </head>
 <body>
  <script src="kinetic-v4.5.4.js"></script>
  <script src="structure.js"></script>
  <script src="common.js"></script>
  <script src="scatter.js"></script>
  <script src="hist.js"></script>
  <script src="box.js"></script>
  <script src="node_event.js"></script>
  <script>
  createMainStructure('_sub.diamonds.csv');
//  createMainStructure('Theoph-from-R.csv');
  </script>
  <div id="layout">
   <div id="header">
    <h1 id="logo">
     <a id="home.html" title="Home"><span>The</span> RIGHT</a>
    </h1>
    <div id="navigation">
     <ul>
      <li id="first">
       <a href="home.html" title="Home">Home</a>
      </li>
      <li>
       <a href="index.html" title="Start">Start</a>
      </li>
      <li>
       <a href="pages/tutorial/tutorial.html" title="Tutorial">Tutorial</a>
      </li>
      <li>
       <a href="pages/contact/contact.html" title="Contact">Contact</a>
      </li>
     </ul>
    </div>
   </div>
   <div id="main-box-index">
    <div id="quote">
     <m1>Search Box</m1>
     <script src="search.js"></script>
     <form id="searchForm1">
      <input type="text" id="searchBox" name="searchId" placeholder="Please input boolean statement..." onkeydown="if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {booleanSearch(searchForm1);  printAns(); return false;}};"></input>
      <a id="searchBtn" href="#" class="myButton" onClick="booleanSearch(searchForm1); printAns(); return false;">Search</a>
      <a id="clearBtn" href="#" class="myButton" onClick="clearSearchBox(); return false;">Clear</a>
      <br><br><m1>Table Button</m1><br>
      <p>
       <a id="showTable" href="#" class="myButton" onClick="return false;">Show Table</a>
       <a id="hideTable" href="#" class="myButton" onClick="return false;">Hide Table</a>
      </p>
     </form>
    </div>
   </div>
   <div id="content">
    <div id="scatterContainer1" oncontextmenu="return false;"></div>
    <div id="histContainer2" oncontextmenu="return false;"></div>
    <div id="boxContainer3" oncontextmenu="return false;"></div>
    <div id="boxContainer4" oncontextmenu="return false;"></div>
    
   </div>
   <script>
  var scatter1 = new Scatter(mainArr,{x: 'carat', y: 'price', color: 'price', legend: 'right', width: 300, height: 300});
    scatter1.draw(1);
    eventTrigger(scatter1);
    var hist2 = new Hist(mainArr,{bin: 2, x: 'cut', width: 300, height: 300});
    hist2.draw(2);
    eventTrigger(hist2);
    var box3 = new Box(mainArr,{x: 'cut', y: 'price',  width: 300, height: 300});
    box3.draw(3);
    eventTrigger(box3);
    var box4 = new Box(mainArr,{x: 'carat', y: 'price',  width: 300, height: 300});
    box4.draw(4);
    eventTrigger(box4);
    
   </script>
   <script src="button_event.js"></script>
   <script src="table.js"></script>
   <div id="footer">
    <p id="copyright">&copy; 2013 - <a href="pages/contact/contact.html">The RIGHT Team</a></p>
    <p id="dont-delete-this">E-mail : <a href="mailto:teamrightjs@gmail.com">team.right.js@gmail.com</a></p>
   </div>
  </div>
 </body>
</html>
